<template>
    <el-card shadow="never" class="data-overview">
        <div class="title_box">
            <p class="title">商品支付金额TOP10</p>
            <div class="handle_box">
                <el-date-picker
                    v-model="params.date"
                    class="selectDate"
                    type="daterange"
                    :disabled-date="disabledDate"
                    :editable="false"
                    range-separator="~"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="changeDate"
                    @calendar-change="calendarChange" />
                <el-button @click="expTop">导出</el-button>
            </div>
        </div>
        <div class="table_box">
            <el-table
                v-loading="loading"
                :data="tableData"
                height="500"
                :header-cell-style="{ background: '#fafafa', color: '#909399' }"
                element-loading-text="加载中...">
                <el-table-column label="排名" width="80">
                    <template #default="scope">
                        <div>{{ scope.$index + 1 }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="商品信息">
                    <template #default="{ row }">
                        <div class="goods_info">
                            <el-avatar shape="square" fit="cover" :size="40" :src="row.cover" />
                            <div class="text">
                                <el-tooltip
                                    effect="dark"
                                    placement="top-start"
                                    :disabled="tooltipDisabled"
                                    :content="row.goods_name">
                                    <p class="ellipsis-1" @mouseenter="onTooltipMouse($event)">
                                        {{ row.goods_name }}
                                    </p>
                                </el-tooltip>
                                <p class="goods-id">{{ row.external_goods_id }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="!params.retail_shop_id" prop="retail_shop_name" label="归属店铺" />
                <el-table-column prop="price" label="商品单价（元）"> </el-table-column>
                <el-table-column prop="pay_num" label="支付件数" />
                <el-table-column prop="pay_amount" label="支付金额（元）" />
                <template #empty>
                    <div class="empty">
                        <img class="empty_img" src="@/assets/noData.png" alt="" />
                        <div>暂无数据</div>
                    </div>
                </template>
            </el-table>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { ShowTaskMessage } from '@/hooks/TaskMessageHooks';
import { goodsTopV1, goodsTopExportV1 } from '@/api/ecommerce/slaesStat.ts';
import { getDay, isTextBeyond } from '@/utils/utils';
import { ElMessage } from 'element-plus';

const route = useRoute();
const tableData = ref<any>([]); // top10数据
const loading = ref(true);

// 接口参数
const params = reactive({
    retail_shop_id: route.query.shop_id,
    date: [getDay(-7), getDay(-1, true)] // 选择时间，默认是最近七天
});

// 选择时间做多支持选择90天的数据
const pickDay = ref();
const impose = ref(89);
const disabledDate = (time: any) => {
    if (!pickDay.value) {
        return time.getTime() > Date.now() - 3600 * 1000 * 24;
    }
    const con1 = new Date(pickDay.value).getTime() - 89 * 24 * 60 * 60 * 1000;
    const con2 = new Date(pickDay.value).getTime() + 89 * 24 * 60 * 60 * 1000;
    const con3 = time.getTime() > Date.now() - 3600 * 1000 * 24;
    return con3 ? con3 : time.getTime() < con1 || time.getTime() > con2;
};

const calendarChange = (val: Date[]) => {
    const [pointDay] = val;
    pickDay.value = pointDay;
};

// 选择时间后调用接口
const changeDate = (val: any) => {
    if (!val || !val.length) {
        pickDay.value = '';
        return;
    }
    const start = val[0] + ' ' + '00:00:00';
    const end = val[1] + ' ' + '23:59:59';
    params.date = [start, end];
    initData();
};

/**
 * 导出异步任务
 */
const expTop = async () => {
    const res = await goodsTopExportV1(params);
    ShowTaskMessage('导出异步任务创建成功');
};

/**
 * 获取Top10表格数据
 */
const initData = async () => {
    loading.value = true;
    const res = await goodsTopV1(params);
    loading.value = false;
    tableData.value = res;
};

/**
 * 商品名称是否溢出，tooltip提示内容
 */
const tooltipDisabled = ref(true);
const onTooltipMouse = (e: any) => {
    tooltipDisabled.value = isTextBeyond(e);
};

onBeforeMount(() => {
    initData();
});
</script>

<style lang="scss" scoped>
.data-overview {
    margin-top: 15px;

    :deep(.el-card__body) {
        padding: 0;
    }
}

.title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 12px 24px;
    border-bottom: 1px solid #eaeaea;

    .title {
        display: flex;
        align-items: center;
        line-height: 16px;
    }

    .handle_box {
        display: flex;
        align-items: center;

        :deep(.selectDate) {
            max-width: 311px;
            margin-right: 8px;
        }
    }
}

:deep(.table_box) {
    margin-top: 24px;
    padding: 0 24px 17px;

    .el-table {
        border: none;

        .el-table__inner-wrapper::before {
            background-color: #fff;
        }
    }

    .goods_info {
        display: flex;
        align-items: center;

        .el-avatar {
            width: 40px;
            flex-shrink: 0;
        }

        .el-avatar > img {
            width: 100%;
        }

        .text {
            min-width: 0;
            height: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 8px;
            font-weight: 400;
            font-family: PingFangSC-Regular, 'PingFang SC';

            & p:first-child {
                font-size: 14px;
                color: #33302d;
                line-height: 14px;
            }

            & p:last-child {
                font-size: 12px;
                color: #969696;
                line-height: 12px;
            }

            .ellipsis-1 {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .empty {
        margin: 100px 0;

        .empty_img {
            transform: translateX(13%);
        }
    }
}
</style>
